<template>
    <div class="header">
        <div class="header_left">
          <span class="iconfont">&#xe624;</span>
        </div>
      <div class="header_input">
        <div class="iconfont search">&#xe632;</div>
        输入城市/地名
      </div>
      <div class="header_right">
        城市
        <span class="iconfont city">&#xe64a;</span></div>
    </div>
</template>
<script>
export default {
  name: 'HomeHeader'
}
</script>
<style scoped lang="stylus">
  @import "~styles/variables.styl"
 /**
 在css中引入外部文件，需要在前面加上波浪号
  */
  .header
    height:.86rem
    background:$bgColor
    color:#fff
    display:flex
    text-align:center
    line-height:.86rem
  .header_left
    float:left
    width:.64rem
  .header_right
    float:right
    width:1.24rem
    .city
      font-size:.24rem;
  .header_input
    flex:1
    border-radius:.1rem
    background:#ffffff
    margin:.12rem
    color:#666;
    text-align:left;
    line-height:.64rem;
    .search
      color:#ccc
      float:left;
      line-height:.68rem;
      margin-left:0.15rem
</style>
